‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
الأربعاء، 8 يناير 2014

شريط يعرض اخر مواضيع المدونة بالالوان التي تناسب مدونتك

تم بواسطة
في
الأربعاء, يناير 08, 2014





بسم الله الرحمن الرحيم 
السلام عليكم ورحمة الله وبركاته 


سأقدم لكم اليوم إضافة جميلة وهي اخر اخبار المدونة او اخر التدوينات 





اولا ابحث عن الكود التالي :



<head/>

واضف هذا الكود قبله :


<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 0px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#f88c00;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>


تانيا ابحث عن الكود التالي :



<div class='main-outer'>

ونلصق قبله هذا الكود :


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking' style='height: 74px; width: 100px; padding-right: 20px;'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>

//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.w3desing.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }              
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       } }); }); 
//]]>
</script>
</b:if></b:if>


الان قم باستبدال الرابط التالى http://w3desing.blogspot.com برابط مدونتك و مبروك عليك الإضافة 



و لتغيير لون احدث الاخبار بما يناسب لون مدونتك ابحث عن الكود التالي :



#beakingnews

ثم داخل هدا الكود ابحث عن background:#f88c00



و غير ما باللون الاحمر باللون الذي يناسب مدونتك 






اقرأ المزيد
مرسلة بواسطة في الأربعاء, يناير 08, 2014 0 التعليقات

ادراج شبكات التواصل الاجتماعي بطريقة رائعة

تم بواسطة
في
الأربعاء, يناير 08, 2014
السلام عليكم ورحمة الله وبركاته

اقدم لكم افضل اضافة لبلوجر 2014 .


لنبدأ على بركة الله

طريقة ادراج الاضافة هي

بلوجر :: قم بالذهاب الى لوحة التحكم , من ثم التخطيط من ثم ادراج اضافة html والصق الكود

وورد بريس او اي موقع اخر

فقط قم بالصاق الكود حيث تريد ان تضهر الاضافة


ادراج شبكات التواصل الاجتماعي بطريقة رائعة







الكود::


رمز Code:
<style type="text/css">
#buttonbg {width: 260px;margin: 10px 20px;padding: 0;}
#buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none;  }
#buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6bZJg1y3_w5s9Je5MVMalL8N8snYbUNtrG19Whl6YTFVNW9petZnSdpiKivPcZ6q4qQ5gKxmUvr1FrMIBzAMz8NTSvesPvxvSaex0eEN9pDnLH-ntTi2xxBDjujK9hrjZiU6Icwke1E/s1600/blsocial12.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;
color: #141414;float: none;height: 48px;line-height: 48px;
margin: 5px 0;position: relative;text-align: left;text-indent: 90px;
text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
-o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;}
#buttonbg span:hover {visibility: hidden;}
#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}
#buttonbg .icon {color: #fafafa;overflow: hidden;}
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;}
#buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;}
#buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42);  background-position: 0 -574px;}
#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}
#buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px; }
#buttonbg li:hover .icon {background-color: #d91e76; }
#buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }
#buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }
#buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<ul id="buttonbg">
<li ><a href="Link Facebook Anda" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li ><a href="Link Twitter Anda" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<li ><a href="Link Google+ Anda" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span></li>
<li ><a href="Link Pinterest Anda" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>
<li ><a href="Link Linkedin Anda" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span></li>
<li ><a href="Link Deviant Art Anda" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>
<li ><a href="Link Youtube Anda" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>
<li ><a href="Link RSS/Feed Anda" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>



* يمكنك تغير الجمل حسب ماتريد مثلا
Like us on Facebook تخليها تابعنا على فيس بوك

لادراج الاضافة فقط قم بتغيير روابط موقعك في الشبكات الاجتماعية بدلا من الكلمات الملونة






اقرأ المزيد
مرسلة بواسطة في الأربعاء, يناير 08, 2014 0 التعليقات

المتواجدون الان نشكل إحترافي

تم بواسطة
في
الأربعاء, يناير 08, 2014


السلام عليكم اعضاء و زوارمدونة هوت ستاراليوم للي لكم إضافة جميلة لبلوجر و هي المتواجدون الان نشكل إحترافي حيث تتضمن المتواجدون الان و المتواجدون في الصفحة و عدد التدوينات و عدد التعليقات .












ليس هناك ما هو افضل من المعاينة المباشرة






اترككم مع المعاينة هنا 





الاضافة سهلة جدا كل ما عليك فعله هو الدخول الى لوحة التحكم => تخطيط => إضافة اداة => HTML/JavaScript

وقم بالصاق الكود التالي


كود بلغة HTML:
<div class='widget-content'>
<ul><li><div><a href="http://w3desing.blogspot.com">المتواجدون الآن في المدونة: <script src="http://fastonlineusers.com/on2.php?d=ebd2-benfsk.blogspot.com+ data:blog.id + " type="text/javascript"></script></a></div></li>
<li><div><a href="http://w3desing.blogspot.com">المتواجدون الآن في هذه الصفحة: <script src="http://fastonlineusers.com/on2.php?d=ebd2-benfsk.blogspot.com+ data:post.id + " type="text/javascript"></script></a></div></li><ul></ul></ul>
</div>
<script style="text/javascript">
function numberOfPosts(json) {
document.write('عدد التدوينات: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('عدد التعليقات : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<ul><li><script src="http://w3desing.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://ebd2-benfsk.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>
<span style="font-size:75%;"></span>
<div dir="rtl" style="text-align: right;" trbidi="on">
<script>
function numberOfPosts(json) {
document.write('عددالتدوينات: <b>' + json.feed.openSearch$totalResults.$t + '</b>
');
}
function numberOfComments(json) {
document.write('عدد التعليقات: <b>' + json.feed.openSearch$totalResults.$t + '</b>
');
}
</script></div>




اتمنى ان تعجبكم الإضافة 


اقرأ المزيد
مرسلة بواسطة في الأربعاء, يناير 08, 2014 0 التعليقات
الاشتراك في: الرسائل (Atom)